<template>
  <div id="app-container">
    <Tabs style="min-width:30vh;height: 100%;">
      <TabPane label="基本信息" icon="ios-bookmarks">
        <Collapse simple v-model="collapseOpen">
            <Panel name="1">模型信息
<!--            <Icon type="md-information-circle" size="24"/>-->
            <Form :model="modelInfo" :label-width="60" slot="content">
              <FormItem label="模型ID">
                <Input v-model="modelInfo.id" disabled></Input>
              </FormItem>
              <FormItem label="名称">
                <Input v-model="modelInfo.name" disabled></Input>
              </FormItem>
              <FormItem label="KEY">
                <Input v-model="modelInfo.key" disabled></Input>
              </FormItem>
              <FormItem label="备注">
                <Input v-model="modelInfo.metaInfo" type="textarea" :autosize="{minRows: 5,maxRows: 8}"
                       ></Input>
              </FormItem>
            </Form>
          </Panel>
          <Panel name="2">基础信息
            <Icon type="md-information-circle" size="24"/>
            <Form :model="formData" :label-width="80" slot="content">
              <FormItem label="节点ID">
                <Input v-model="formData.id" @input="idChange"></Input>
              </FormItem>
              <FormItem label="节点名称 ">
                <Input v-model="formData.name" @input="nameChange"></Input>
              </FormItem>
              <FormItem label="宽度">
                <Input v-model="formData.width" disabled></Input>
              </FormItem>
              <FormItem label="高度">
                <Input v-model="formData.height" disabled></Input>
              </FormItem>
              <FormItem label="位置-X">
                <Input v-model="formData.x" disabled></Input>
              </FormItem>
              <FormItem label="位置-Y">
                <Input v-model="formData.y" disabled></Input>
              </FormItem>
            </Form>
          </Panel>
        </Collapse>
      </TabPane>
      <TabPane label="基础设置" icon="md-cog">
        {{ basicSettings }}
      </TabPane>
    </Tabs>
  </div>
</template>
<script>

export default {
  name: 'DesignRight',
  components: {},
  props: {
    bpmnModeler: {
      type: Object,
      required: true
    },
    modelInfo: {
      type: Object,
      require: true,
      default: null
    }
  },
  data() {
    return {
      collapseOpen: [1,2],
      propsComponent: 'CommonProps',
      // nodeActiveNames: ['process', 'node'],
      basicSettings: '',
      element: {},
      formData: {},
      rootEle: {},
      params: '',
      key: '1',
      defaultData: {},
      activeName: 'second',
      elementName: ''
    }
  },
  computed: {
    userTask() {
      if (!this.element) {
        return
      }
      return this.element.type === 'bpmn:UserTask'
    },
    sequenceFlow() {
      if (!this.element) {
        return
      }
      return this.element.type === 'bpmn:SequenceFlow'
    },
    selectNode() {
      if (!this.element || this.element.id === undefined) {
        return
      }
      return true
    },
    bpmnProcess() {
      if (!this.element) {
        return
      }
      return this.element.type === 'bpmn:Process'
    }
  },
  // watch: {
  //   modelInfo: {
  //     handler(newValue, oldValue) {
  //       console.log('right.vue')
  //     },
  //     deep: true
  //   }
  // },
  mounted() {
    this.handleModeler()
    var _this = this
    const eventBus = _this.bpmnModeler.get('eventBus')
    eventBus.on('diagram.init', function () {
      console.log('diagram.init')
    })
    var prefix = 'tokenSimulation'
    var simulationModeActive = true
    eventBus.on(prefix + '.toggleMode', function () {
      if (simulationModeActive) {
        document.getElementsByClassName('toggle-mode')[0].innerHTML = '流程模拟 <span class="toggle"><i class="fa fa-toggle-on"></i></span>'
        document.querySelector('.djs-palette').style.display = 'none'
      } else {
        document.getElementsByClassName('toggle-mode')[0].innerHTML = '流程模拟 <span class="toggle"><i class="fa fa-toggle-off"></i></span>'
        document.querySelector('.djs-palette').style.display = 'inline-block'
      }
      simulationModeActive = !simulationModeActive
    })

    // 监听流程图事件
    const events = [
      // 'element.click',
      // 'element.dblclick',
      'shape.added',
      'shape.move.end',
      'connection.removed',
      'shape.removed',
      'connection.added'
      // 'commandStack.shape.create.postExecuted',
      // 'commandStack.shape.remove.postExecuted',
      // 'commandStack.connection.create.postExecuted',
      // 'commandStack.connection.remove.postExecuted'

      /*   'element.hover',
        'element.out',
        'element.mousedown',
        'element.mouseup' */
    ]
    events.forEach(function (event) {
      eventBus.on(event, function (e) {
        var elementRegistry = _this.bpmnModeler.get('elementRegistry')
        var shape = e.element ? elementRegistry.get(e.element.id) : e.shape

        switch (event) {
          case 'shape.added':
            console.log('新增了shape')
            // 展示新增图形的属性
            _this.key = e.element.id.replace('_label', '')
            // _this.propsComponent = bpmnHelper.getComponentByEleType(shape.type)
            _this.element = e.element

            break
          case 'shape.move.end':
            console.log('移动了shape')
            // 展示新增图形的属性
            _this.key = shape.id
            // _this.propsComponent = bpmnHelper.getComponentByEleType(shape.type)
            _this.element = e.shape
            break
          case 'connection.added':
            break
          case 'shape.removed':
            // 展示默认的属性
            _this.propsComponent = 'CommonProps'
            break
          case 'connection.removed':
            break
          default:
            break
        }
      })
    })
  },
  created() {
    // console.log(this.modelInfo)
    // Object.assign(this.modelInfo, {key: this.bpmnModeler.get('canvas').getRootElement().id})
  },
  methods: {
    idChange(id) {
      let properties = {}
      properties['id'] = id
      const modeling = this.bpmnModeler.get('modeling')
      modeling.updateProperties(this.element, properties)
      const rootElement = this.bpmnModeler.get('canvas').getRootElement()
      Object.assign(this.modelInfo, {key: rootElement.id})
    },
    getBpmnModeler() {
      return this.bpmnModeler
    },
    // 属性面板名称，更新回流程节点
    nameChange(name) {
      const modeling = this.bpmnModeler.get('modeling')
      modeling.updateLabel(this.element, name)


      let properties = {}
      properties['name'] = name
      modeling.updateProperties(this.element, properties)
      const rootElement = this.bpmnModeler.get('canvas').getRootElement()
      console.log(rootElement.businessObject.name)
      Object.assign(this.modelInfo,{ name :rootElement.businessObject.name} )
    },
    handleModeler() {
      // Object.assign(this.modelInfo, {key: this.bpmnModeler.get('canvas').getRootElement().id})
      const that = this
      that.element = that.bpmnModeler.get('canvas').getRootElement()
      const eventBus = that.bpmnModeler.get('eventBus')
      const eventTypes = ['element.click', 'element.changed', 'selection.changed']
      eventTypes.forEach(function (eventType) {
        eventBus.on(eventType, function (e) {
          console.log(':::::::handleModeler eventType:' + eventType)
          if (eventType === 'element.changed') {
            that.elementChanged(e)
          } else if (eventType === 'selection.changed') {
            const element = e.newSelection[0]
            if (!element) return
            that.element = element
          } else if (eventType === 'element.click') {
            that.element = e.element
            let businessObject = that.bpmnModeler.get('elementRegistry').get(that.element.id).businessObject;
            that.formData = JSON.parse(JSON.stringify(that.element));
            Object.assign(that.formData,businessObject);
            that.basicSettings = e.element.id + '----' + e.element.name
            if (!e || e.element.type === 'bpmn:Process') {
              that.key = '1'
              that.propsComponent = 'CommonProps'
            } else {
              // 展示新增图形的属性
              that.key = e.element.id
              // that.propsComponent = bpmnHelper.getComponentByEleType(e.element.type)
            }
          }
        })
      })
    },
    elementChanged(e) {
      const id = e.element.id.replace('_label', '')
      var shape = this.getShape(id)
      const that = this
      if (!shape) {
        // 若是shape为null则表示删除, 无论是shape还是connect删除都调用此处
        console.log('无效的shape','删除了shape和connect')
        // 上面已经用 shape.removed 检测了shape的删除, 要是删除shape的话这里还会被再触发一次
        return
      }
      const {element} = e
      if (!element) return
      // console.log('element.changed:' + JSON.stringify(element))
      element.businessObject.name
      if (element.type === 'bpmn:SequenceFlow') {
        that.elementName = element.name
      } else {
        that.elementName = element.businessObject.name
      }
      if (!that.isInvalid(shape.type)) {
        that.element = e.element
        if (that.isSequenceFlow(shape.type)) {
          console.log('改变了线')
        } else {
          that.setDefaultProperties()
        }
      }
    },
    isInvalid(param) { // 判断是否是无效的值
      return param === null || param === undefined || param === ''
    },
    isSequenceFlow(type) { // 判断是否是线
      return type === 'bpmn:SequenceFlow'
    }, getShape(id) {
      var elementRegistry = this.bpmnModeler.get('elementRegistry')
      return elementRegistry.get(id)
    },
    setDefaultProperties() {
      console.log('setDefaultProperties')
      const that = this
      const {element} = that
      if (element) {
        // 这里可以拿到当前点击的节点的所有属性
        const {type, businessObject} = element
        const {name} = businessObject
        if (that.verifyIsEvent(type)) {
          const eventType = businessObject.eventDefinitions ? businessObject.eventDefinitions[0]['$type'] : ''
          console.log(eventType)
        } else if (that.verifyIsTask(type)) {
          const taskType = type
          console.log(taskType)
        }
        that.element['name'] = name || that.defaultData[element.type]
      }
    },
    verifyIsEvent(type) {
      return type.includes('Event')
    },
    verifyIsTask(type) {
      return type.includes('Task')
    }
  }
}
</script>

<style lang="scss">
</style>

